<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        h2,
        p {
          text-align: center;
        }
  
        .student {
          overflow: hidden;
          margin: 0 auto;
          /* 合并相邻边框 */
          border-collapse: collapse;
          text-align: center;
          border-radius: 10px 10px 0 0;
        }
  
        .student tr {
          cursor: pointer;
        }
  
        .student th {
          padding: 5px 50px;
          color: #fff;
        }
  
        .student,
        th,
        td {
          border: 1px solid #fff;
          line-height: 45px;
        }
  
        /* 给行添加渐变背景颜色 */
        .student thead tr {
          background-image: linear-gradient(to right, #f46e33, #f057a5);
        }
  
        /* 从第2行开始修改背景颜色 */
        .student tbody tr {
          background-image: linear-gradient(to right, #fdf0eb, #fdeff6);
        }
  
        /* 从第2行开始 最后一个单元格颜色变化 */
        .student tbody tr :last-child {
          color: #f282bb;
        }
  
        /* 第一行鼠标经过不要变颜色 */
        .student tbody tr:hover {
          background-image: linear-gradient(to right, #f9e3da, #f9d6e8);
        }
      </style>
  </head>
  <body>

    <!-- <table class="student">
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>家乡</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>小明</td>
                <td>18</td>
                <td>男</td>
                <td>河北省</td>
            </tr>
            <tr>
                <td>1</td>
                <td>小明</td>
                <td>18</td>
                <td>男</td>
                <td>河北省</td>
            </tr>
            <tr>
                <td>1</td>
                <td>小明</td>
                <td>18</td>
                <td>男</td>
                <td>河北省</td>
            </tr>
            <tr>
                <td>1</td>
                <td>小明</td>
                <td>18</td>
                <td>男</td>
                <td>河北省</td>
            </tr>
        </tbody>
    </table> -->


    <script>
      let sales = [
        { name: "小明", age: 18, gender: "男", money: 30, status: 0 },
        { name: "小红", age: 26, gender: "女", money: 99, status: 3 },
        { name: "小刚", age: 19, gender: "男", money: 88, status: 2 },
        { name: "小丽", age: 20, gender: "女", money: 67, status: 1 },
        { name: "晓强", age: 23, gender: "女", money: 77, status: 1 },
        { name: "小张", age: 25, gender: "女", money: 80, status: 2 },
      ]

    //   let arr = []
    //   for(let i=0;i<sales.length;i++){
    //     arr.push(sales[i].money)
        // // console.log(sales[i].money);
        // const rem = sales[i].money.sort(function(a,b){
        //     return a-b
        // })
    //   }
    //   const rem = arr.sort(function(a,b){
    //     return b-a
    //   })
    //   console.log(rem);

    for(let i = 0 ; i < sales.length ;i++){
        for(let j = 0 ;j < sales.length-1-i ; j++){
            if(sales[j].money < sales[j+1].money){
                let unm = sales[j]
                sales[j] = sales[j+1]
                sales[j+1] = unm
            }
        }
    }
    console.log(sales);


    for(let i = 0 ; i< sales.length;i++){
        switch(sales[i].status){
            case 1:
                sales[i].status = '及格'
                break
            case 2:
            sales[i].status = '良好'
                break
            case 3:
            sales[i].status = '优秀'
                break
            default:
            sales[i].status = '不及格'


        }
    }


    let html = `<table class="student">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>销售额</th>
                <th>业绩状态</th>
            </tr>
        </thead>
        <tbody>`
            for(let i=0;i< sales.length;i++){
                html += `<tr>
                <td>${sales[i].name}</td>
                <td>${sales[i].age}</td>
                <td>${sales[i].gender}</td>
                <td>${sales[i].money}万</td>
                <td>${sales[i].status}</td>
            </tr>`
            }
        html += `</tbody>
    </table>`
    document.write(html)

    </script>
  </body>
</html>
